<template>
  <div>
    <Tabs
      v-model:activeKey="activeKey"
      centered
      class="h-full"
      :tabBarStyle="{ backgroundColor: '#fff', margin: '0 16px' }"
      @change="handleTabChange"
    >
      <TabPane
        v-for="(item, index) in tabList"
        :key="item.component"
        :tab="item.title"
        class="h-full"
      >
        <!-- forceRender -->
      </TabPane>
    </Tabs>

    <SealList @handle-view="handleView" v-show="activeKey === 'SealList'" />
    <UseRecord
      :stampId="sealListRecord['id']"
      :title="sealListRecord['title']"
      v-if="activeKey === 'UseRecord'"
    />
  </div>
</template>
<script lang="ts" setup>
  import SealList from './modules/sealList/SealList.vue';
  import UseRecord from './modules/useRecord/UseRecord.vue';
  import { ref } from 'vue';
  import { Tabs, TabPane } from 'ant-design-vue';

  const activeKey = ref('SealList');
  //tabs
  const tabList = ref([
    {
      title: '印章列表',
      key: 'SealList',
      component: 'SealList',
    },
    {
      title: '使用日志',
      key: 'UseRecord',
      component: 'UseRecord',
    },
  ]);
  const sealListRecord = ref({});
  const handleView = (record) => {
    console.log('eee', record);
    sealListRecord.value = record;
    activeKey.value = 'UseRecord';
  };

  const handleTabChange = (key) => {
    if (key === 'UseRecord') {
      sealListRecord.value = {};
    }
  };
</script>
